<!--
 * @Author: boyyang
 * @Date: 2022-02-03 13:56:09
 * @LastEditTime: 2022-02-05 14:05:01
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\views\chatRoom\components\chatRoomRightTitle.vue
-->

<template>
    <div class="chat-room-title">
        <div class="name">{{props.groupMes?.name}}</div>
        <div class="all-users">
            <i class="iconfont icon-jiqun" @click="iconClick"></i>
        </div>
    </div>
</template>

<script lang="ts" setup>
interface IMessageTitleProps {
    groupMes?: any;
}   

interface IMessageTitleEmits {
    (e: 'iconClick'): void
}

const props = withDefaults(defineProps<IMessageTitleProps>(), {})

const emits = defineEmits<IMessageTitleEmits>()

const iconClick = () => {
    emits('iconClick')
}
</script>

<style scoped lang="scss">
.chat-room-title {
    box-sizing: border-box;
    width: 100%;
    height: 75px;
    background-color: #6b6882;

    border-bottom: 1px solid whitesmoke;

    display: flex;
    justify-content: center;
    align-items: center;

    .name {
        font-size: 20px;
        color: whitesmoke;
    }

    .all-users{
      position: absolute;
      right: 10px;

      i {
          font-size: 20px;
          cursor: pointer;
          color: #161823;
      }
    }
}

@media screen and (max-width: 1000px) {
    .chat-room-title {
        height: 30px;

        .name {
            font-size: 10px;
        }
    }
}
</style>
